<template>
    <view class="food-page">
        <u-sticky offset-top="0" style="top: 0;">
            <!-- 顶部搜索栏 -->
            <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
                <view class="search-bar">
                    <view class="back-btn" @click="goBack">
                        <u-icon name="arrow-left" size="24" color="#303133"></u-icon>
                    </view>
                    <view class="search-wrapper">
                        <u-input placeholder="请输入搜索内容" border="surround" v-model="searchValue" @change="change"
                            shape="circle" suffixIcon="search"></u-input>
                    </view>
                    <view class="location-btn" @click="getCurrentLocation">
                        <u-icon name="map" size="24" color="#fa436a"></u-icon>
                    </view>
                </view>
            </view>

            <!-- 分类标签 -->
            <view class="category-section">
                <scroll-view class="category-scroll" scroll-x :show-scrollbar="false">
                    <view class="category-list">
                        <view v-for="(category, index) in categories" :key="index" class="category-item"
                            :class="{ active: category.active }" @click="selectCategory(index)">
                            <text>{{ category.name }}</text>
                        </view>
                    </view>
                </scroll-view>
            </view>

            <!-- 筛选栏 -->
            <view class="filter-bar">
                <view class="filter-item" :class="{ active: currentLocation !== '附近' }" @click="showLocationMenu">
                    <text>{{ currentLocation }}</text>
                    <u-icon name="arrow-down" size="12" color="#909399"></u-icon>
                </view>
                <view class="filter-item" :class="{ active: currentSort !== '智能排序' }" @click="showSortMenu">
                    <text>{{ currentSort }}</text>
                    <u-icon name="arrow-down" size="12" color="#909399"></u-icon>
                </view>
                <!-- <view class="filter-item special" :class="{ active: showVoucher }" @click="toggleVoucher">
				<text>神券商家</text>
			</view>
			<view class="filter-item special" :class="{ active: showHighScore }" @click="toggleHighScore">
				<text>点评高分</text>
			</view> -->
                <view class="filter-item filter-btn" :class="{ active: hasActiveFilters }" @click="showFilterPanel">
                    <text>筛选</text>
                    <u-icon name="list" size="12" color="#909399"></u-icon>
                </view>
            </view>

            <!-- 美食数量统计 -->
            <view class="food-count">
                <text>为您找到 {{ foodList.length }} 家美食</text>
            </view>
        </u-sticky>

        <!-- 美食列表 -->
        <scroll-view class="food-list" scroll-y :show-scrollbar="false" @scrolltolower="loadMore" refresher-enabled
            @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing">
            <view v-for="(food, index) in filteredFoodList" :key="index" class="food-item"
                @click="goToFoodDetail(food)">
                <view class="food-left">
                    <image :src="food.image" mode="aspectFill" @error="handleImageError"></image>
                    <view class="tag recommend" v-if="food.recommend">推荐</view>
                    <view class="tag live" v-if="food.isLive">直播</view>
                </view>
                <view class="food-right">
                    <view class="food-name">{{ food.name }}</view>
                    <view class="rating-info">
                        <view class="stars">
                            <text v-for="i in 5" :key="i" class="star" :class="{ active: i <= food.rating }">★</text>
                        </view>
                        <text class="rating">{{ food.rating }}</text>
                        <text class="reviews">{{ food.reviews }}条</text>
                        <text class="price">¥{{ food.price }}/人</text>
                    </view>
                    <view class="location-info">
                        <text class="cuisine">{{ food.cuisine }}</text>
                        <text class="location">{{ food.location }}</text>
                        <text class="distance">直线{{ food.distance }}</text>
                    </view>
                    <view class="voucher-info" v-if="food.voucher">
                        <view class="voucher-tag">神券</view>
                        <text>{{ food.voucher }}</text>
                        <u-icon name="arrow-right" size="12" color="#fa436a"></u-icon>
                    </view>
                    <view class="promotion" v-for="(promo, promoIndex) in food.promotions" :key="promoIndex">
                        <view class="promo-tag" :class="getPromoClass(promo.type)">{{ promo.type }}</view>
                        <text class="promo-content">{{ promo.content }}</text>
                    </view>
                    <view class="features" v-if="food.features && food.features.length > 0">
                        <text v-for="(feature, featureIndex) in food.features" :key="featureIndex" class="feature-tag">
                            {{ feature }}
                        </text>
                    </view>
                </view>
            </view>

            <!-- 加载状态 -->
            <view class="loading-more" v-if="isLoading">
                <u-loading-icon></u-loading-icon>
                <text>加载中...</text>
            </view>

            <!-- 没有更多数据 -->
            <view class="no-more" v-if="!hasMore && filteredFoodList.length > 0">
                <text>已加载全部内容</text>
            </view>

            <!-- 空状态 -->
            <view class="empty-state" v-if="filteredFoodList.length === 0 && !isLoading">
                <image src="/static/temp/c5.png" class="empty-icon"></image>
                <text class="empty-text">暂无相关美食</text>
                <text class="empty-tip">换个筛选条件试试吧~</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            statusBarHeight: 0,
            searchValue: '',
            currentLocation: '附近',
            currentSort: '智能排序',
            showVoucher: false,
            showHighScore: false,
            isLoading: false,
            isRefreshing: false,
            hasMore: true,
            categories: [
                { name: '推荐', active: true },
                { name: '奶茶咖啡', active: false },
                { name: '快餐小吃', active: false },
                { name: '火锅', active: false },
                { name: '烧烤烤肉', active: false },
                { name: '地方菜', active: false }
            ],
            foodList: [
                {
                    id: 1,
                    name: '王家味老济南·颜派鲁菜(印象城店)',
                    image: '/static/temp/banner2.jpg',
                    rating: 4.5,
                    reviews: 2183,
                    price: 97,
                    cuisine: '鲁菜',
                    location: '济南西站',
                    distance: '1.5km',
                    recommend: true,
                    voucher: '饿店区鲁菜人气榜第1名',
                    promotions: [
                        { type: '惠', content: '¥359 ¥493 【口碑·臻选鸡鱼宴】鲁菜4人餐' },
                        { type: '惠', content: '¥209 ¥272 【爆款·鲤鱼跃龙门】鲁菜双人餐' }
                    ]
                },
                {
                    id: 2,
                    name: '塔斯汀中国汉堡(济南槐荫店)',
                    image: '/static/temp/banner3.jpg',
                    rating: 4.6,
                    reviews: 229,
                    price: 19,
                    cuisine: '西式快餐/汉堡',
                    location: '济南西站',
                    distance: '202m',
                    recommend: false,
                    isLive: true,
                    voucher: '直播中',
                    promotions: [
                        { type: '直播专享价', content: '¥15.8 6.6折 ¥24 【百万爆款】任选直播' },
                        { type: '特惠促销', content: '¥24.9 5.2折 ¥48 【6月特惠】双堡可选4件套' }
                    ],
                    features: ['神券', '直播中', '回头客1千+', '近期93%好评']
                },
                {
                    id: 3,
                    name: '湘了个西·私房新湘菜',
                    image: '/static/temp/banner4.jpg',
                    rating: 4.9,
                    reviews: 3473,
                    price: 64,
                    cuisine: '湘菜',
                    location: '济南西站',
                    distance: '1.6km',
                    recommend: true,
                    voucher: '济南西站川湘菜好评榜第3名',
                    promotions: [
                        { type: '惠', content: '¥231 6.8折 ¥342 【正宗湘菜】客藏鱼头四人餐' },
                        { type: '特惠促销', content: '¥113.9 6.2折 ¥185 【湖南厨师】小炒黄牛肉套餐' }
                    ],
                    features: ['订', '可配送', '公益商家']
                },
                {
                    id: 4,
                    name: '麦当劳(济南西城大厦店)',
                    image: '/static/temp/ad1.jpg',
                    rating: 4.6,
                    reviews: 494,
                    price: 28,
                    cuisine: '西式快餐/汉堡',
                    location: '济南西站',
                    distance: '298m',
                    recommend: false,
                    voucher: '直播中',
                    promotions: [
                        { type: '直播专享价', content: '¥13.9 5.4折 ¥26 【百万爆品】麦香鸡堡直播专享' },
                        { type: '会员价', content: '¥24.9 ¥33.5 【24种搭配】1+1堡套小食任选' }
                    ],
                    features: ['租赁外卖铜牌', '口感超赞', '回头客1千+']
                },
                {
                    id: 5,
                    name: '麦当劳(济南西城大厦店)',
                    image: '/static/temp/banner4.jpg',
                    rating: 4.6,
                    reviews: 494,
                    price: 28,
                    cuisine: '西式快餐/汉堡',
                    location: '济南西站',
                    distance: '298m',
                    recommend: false,
                    voucher: '直播中',
                    promotions: [
                        { type: '直播专享价', content: '¥13.9 5.4折 ¥26 【百万爆品】麦香鸡堡直播专享' },
                        { type: '会员价', content: '¥24.9 ¥33.5 【24种搭配】1+1堡套小食任选' }
                    ],
                    features: ['租赁外卖铜牌', '口感超赞', '回头客1千+']
                }
            ]
        }
    },
    onLoad() {
        // 获取状态栏高度
        const systemInfo = uni.getSystemInfoSync();
        this.statusBarHeight = systemInfo.statusBarHeight;
    },
    computed: {
        // 筛选后的美食列表
        filteredFoodList() {
            let list = [...this.foodList];

            // 根据神券商家筛选
            if (this.showVoucher) {
                list = list.filter(food => food.voucher);
            }

            // 根据点评高分筛选
            if (this.showHighScore) {
                list = list.filter(food => food.rating >= 4.5);
            }

            // 根据分类筛选
            const activeCategory = this.categories.find(cat => cat.active);
            if (activeCategory && activeCategory.name !== '推荐') {
                // 这里可以根据分类名称筛选对应的美食
                // 暂时返回所有数据
            }

            return list;
        },

        // 是否有激活的筛选条件
        hasActiveFilters() {
            return this.showVoucher || this.showHighScore || this.currentSort !== '智能排序' || this.currentLocation !== '附近';
        }
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },

        change(value) {
            // 搜索内容变化时的处理
            console.log('搜索内容:', value);
        },

        handleSearchClick() {
            // 跳转到搜索页面或显示搜索框
            uni.showToast({
                title: '跳转到搜索页面',
                icon: 'none'
            });
        },

        getCurrentLocation() {
            uni.showLoading({
                title: '正在定位...'
            });

            // 模拟定位
            setTimeout(() => {
                uni.hideLoading();
                uni.showToast({
                    title: '定位成功',
                    icon: 'success'
                });
            }, 1500);
        },

        selectCategory(index) {
            this.categories.forEach(item => item.active = false);
            this.categories[index].active = true;

            // 添加触觉反馈
            uni.vibrateShort();
        },

        showLocationMenu() {
            uni.showActionSheet({
                itemList: ['附近', '1km内', '2km内', '5km内', '全城'],
                success: (res) => {
                    const locations = ['附近', '1km内', '2km内', '5km内', '全城'];
                    this.currentLocation = locations[res.tapIndex];
                    uni.vibrateShort();
                }
            });
        },

        showSortMenu() {
            uni.showActionSheet({
                itemList: ['智能排序', '距离最近', '评分最高', '销量最高', '价格最低'],
                success: (res) => {
                    const sorts = ['智能排序', '距离最近', '评分最高', '销量最高', '价格最低'];
                    this.currentSort = sorts[res.tapIndex];
                    uni.vibrateShort();
                }
            });
        },

        toggleVoucher() {
            this.showVoucher = !this.showVoucher;
            uni.vibrateShort();
        },

        toggleHighScore() {
            this.showHighScore = !this.showHighScore;
            uni.vibrateShort();
        },

        showFilterPanel() {
            uni.showToast({
                title: '打开筛选面板',
                icon: 'none'
            });
        },

        goToFoodDetail(food) {
            uni.navigateTo({
                url: `/pages/food/foodDetail?foodId=${food.id}&foodName=${encodeURIComponent(food.name)}`
            });
        },

        handleImageError() {
            console.log('图片加载失败');
        },

        onRefresh() {
            this.isRefreshing = true;

            // 模拟刷新数据
            setTimeout(() => {
                this.isRefreshing = false;
                uni.showToast({
                    title: '刷新成功',
                    icon: 'success'
                });
            }, 1500);
        },

        loadMore() {
            if (this.isLoading || !this.hasMore) return;

            this.isLoading = true;

            // 模拟加载更多数据
            setTimeout(() => {
                this.isLoading = false;

                // 模拟没有更多数据
                if (this.foodList.length >= 8) {
                    this.hasMore = false;
                    uni.showToast({
                        title: '已加载全部内容',
                        icon: 'none'
                    });
                }
            }, 1000);
        },

        getPromoClass(type) {
            const typeMap = {
                '惠': 'hui',
                '直播专享价': 'live',
                '特惠促销': 'special',
                '会员价': 'member'
            };
            return typeMap[type] || 'default';
        }
    }
}
</script>

<style lang="scss" scoped>
.food-page {
    background: #f5f5f5;
    min-height: 100vh;
}

.header {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;

    .search-bar {
        display: flex;
        align-items: center;
        padding: 20upx 30upx;

        .back-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60upx;
            height: 60upx;
            margin-right: 20upx;
            border-radius: 50%;
            transition: background-color 0.3s;

            &:active {
                background-color: #f5f5f5;
            }
        }

        .search-wrapper {
            flex: 1;
            margin-right: 20upx;

            ::v-deep .u-input {
                background-color: #f8f8f8 !important;
                border: none;
            }

            .search-input {
                display: flex;
                align-items: center;
                height: 60upx;
                padding: 0 20upx;
                background: #f8f8f8;
                border-radius: 30upx;
                transition: background-color 0.3s;

                &:active {
                    background-color: #f0f0f0;
                }

                .search-placeholder {
                    flex: 1;
                    margin-left: 12upx;
                    font-size: 28upx;
                    color: #909399;
                }
            }
        }

        .location-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60upx;
            height: 60upx;
            background: #f8f8f8;
            border-radius: 50%;
            transition: all 0.3s;

            &:active {
                background-color: #f0f0f0;
                transform: scale(0.95);
            }
        }
    }
}

.category-section {
    background: #fff;
    padding: 20upx 0;

    .category-scroll {
        white-space: nowrap;
    }

    .category-list {
        display: flex;
        padding: 0 30upx;

        .category-item {
            padding: 10upx 20upx;
            margin-right: 20upx;
            background: #f8f8f8;
            border-radius: 20upx;

            &.active {
                background: #fa436a;

                text {
                    color: #fff;
                }
            }

            text {
                color: #333;
            }
        }
    }
}

.filter-bar {
    display: flex;
    align-items: center;
    padding: 20upx 30upx;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;

    .filter-item {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;
        padding: 12upx 16upx;
        border-radius: 16upx;
        transition: all 0.3s;

        &:active {
            background-color: #f5f5f5;
        }

        &.active {
            text {
                color: #fa436a;
                font-weight: 500;
            }
        }

        &.special {
            &.active {
                background-color: rgba(250, 67, 106, 0.1);

                text {
                    color: #fa436a;
                }
            }
        }

        &.filter-btn {
            border: 1px solid #e0e0e0;
            border-radius: 20upx;
            padding: 8upx 16upx;

            &.active {
                background-color: #fa436a;
                border-color: #fa436a;

                text {
                    color: #fff;
                }
            }
        }

        text {
            font-size: 28upx;
            color: #303133;
            margin-right: 8upx;
            transition: color 0.3s;
        }
    }
}

.food-list {
    padding: 0 30upx;
}

.food-item {
    display: flex;
    padding: 24upx;
    margin-bottom: 20upx;
    background: #fff;
    border-radius: 16upx;
    box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.05);
    transition: all 0.3s;

    &:active {
        transform: scale(0.98);
        box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
    }

    .food-left {
        position: relative;
        width: 180upx;
        height: 180upx;
        margin-right: 24upx;
        border-radius: 12upx;
        overflow: hidden;

        image {
            width: 100%;
            height: 100%;
            transition: transform 0.3s;
        }

        &:active {
            image {
                transform: scale(1.05);
            }
        }

        .tag {
            position: absolute;
            top: 12upx;
            left: 12upx;
            padding: 6upx 12upx;
            font-size: 20upx;
            color: #fff;
            border-radius: 8upx;
            font-weight: 500;
            box-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.2);

            &.recommend {
                background: linear-gradient(135deg, #fa436a, #ff6b6b);
            }

            &.live {
                background: linear-gradient(135deg, #ff4d4f, #ff7875);
                animation: liveBlink 2s infinite;
            }
        }
    }

    .food-right {
        flex: 1;
        display: flex;
        flex-direction: column;

        .food-name {
            font-size: 34upx;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 16upx;
            color: #303133;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .rating-info {
            display: flex;
            align-items: center;
            margin-bottom: 12upx;

            .stars {
                display: flex;
                margin-right: 8upx;

                .star {
                    font-size: 20upx;
                    color: #e0e0e0;
                    margin-right: 2upx;
                    transition: color 0.3s;

                    &.active {
                        color: #ff9500;
                    }
                }
            }

            .rating {
                font-size: 26upx;
                font-weight: 600;
                margin-right: 12upx;
                color: #ff9500;
            }

            .reviews {
                font-size: 24upx;
                margin-right: 12upx;
                color: #909399;
            }

            .price {
                font-size: 24upx;
                color: #909399;
            }
        }

        .location-info {
            display: flex;
            align-items: center;
            margin-bottom: 16upx;

            text {
                font-size: 24upx;
                margin-right: 16upx;
                color: #606266;
            }
        }

        .voucher-info {
            display: flex;
            align-items: center;
            margin-bottom: 12upx;
            padding: 8upx 0;

            .voucher-tag {
                padding: 4upx 8upx;
                background: linear-gradient(135deg, #fa436a, #ff6b6b);
                color: #fff;
                font-size: 20upx;
                border-radius: 6upx;
                margin-right: 8upx;
                font-weight: 500;
            }

            text {
                flex: 1;
                font-size: 24upx;
                color: #fa436a;
                font-weight: 500;
            }
        }

        .promotion {
            display: flex;
            align-items: flex-start;
            margin-bottom: 8upx;

            .promo-tag {
                padding: 4upx 8upx;
                color: #fff;
                font-size: 20upx;
                border-radius: 6upx;
                margin-right: 8upx;
                font-weight: 500;
                flex-shrink: 0;

                &.hui {
                    background: linear-gradient(135deg, #fa436a, #ff6b6b);
                }

                &.live {
                    background: linear-gradient(135deg, #ff4d4f, #ff7875);
                }

                &.special {
                    background: linear-gradient(135deg, #52c41a, #73d13d);
                }

                &.member {
                    background: linear-gradient(135deg, #1890ff, #40a9ff);
                }

                &.default {
                    background: linear-gradient(135deg, #722ed1, #9254de);
                }
            }

            .promo-content {
                flex: 1;
                font-size: 22upx;
                color: #606266;
                line-height: 1.4;
            }
        }

        .features {
            display: flex;
            flex-wrap: wrap;
            margin-top: auto;
            padding-top: 8upx;

            .feature-tag {
                padding: 4upx 8upx;
                margin-right: 8upx;
                margin-bottom: 6upx;
                background: #f5f5f5;
                border-radius: 8upx;
                font-size: 20upx;
                color: #909399;
            }
        }
    }
}

/* 加载状态 */
.loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40upx 0;

    text {
        margin-left: 16upx;
        font-size: 28upx;
        color: #909399;
    }
}

/* 没有更多数据 */
.no-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30upx 0;

    text {
        font-size: 24upx;
        color: #c0c4cc;
        position: relative;

        &::before,
        &::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 60upx;
            height: 1px;
            background: #e4e7ed;
        }

        &::before {
            left: -80upx;
        }

        &::after {
            right: -80upx;
        }
    }
}

/* 空状态 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120upx 0;

    .empty-icon {
        width: 200upx;
        height: 150upx;
        margin-bottom: 30upx;
        opacity: 0.6;
    }

    .empty-text {
        font-size: 32upx;
        color: #909399;
        margin-bottom: 12upx;
        font-weight: 500;
    }

    .empty-tip {
        font-size: 24upx;
        color: #c0c4cc;
    }
}

/* 直播标签闪烁动画 */
.tag.live {
    animation: liveBlink 2s infinite;
}

@keyframes liveBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0.7;
    }
}

/* 美食数量统计 */
.food-count {
    padding: 20upx 30upx;
    background: #f5f5f5;

    text {
        font-size: 24upx;
        color: #909399;
    }
}
</style>